<template>
  <div>
    <!--上部搜索条件组件-->
    <activitySearch
      :avtivity-type-list="avtivityTypeList"
      @toSearch="toSearch"
    ></activitySearch>
    <!--table 刷新-->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- table -->
    <div class="table-box">
      <el-table
        ref="table"
        stripe
        v-loading="loading"
        :data="tableData"
        :fit="true"
        max-height="490"
      >
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>

        <el-table-column
          label="消息名称"
          prop="name"
          align="center"
        ></el-table-column>

        <el-table-column label="活动类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.activityType | filterStatus(that) }}
          </template>
        </el-table-column>

        <el-table-column label="发送状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status | filterName('send_status') }}
          </template>
        </el-table-column>

        <el-table-column
          label="发送数量"
          prop="sendCounts"
          align="center"
        ></el-table-column>

        <el-table-column
          label="发送成功数量"
          prop="successCounts"
          align="center"
        ></el-table-column>
        <el-table-column
          label="发送时间"
          prop="sendDate"
          align="center"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createdTime"
          align="center"
        ></el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toDetailOrEdit(scope.row, 'Detail')">
              详情
            </el-button>
            <el-button
              type="text"
              @click="toDetailOrEdit(scope.row, 'Edit')"
              v-if="isShowEdit(scope.row.status)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              @click="handlerState(scope.row, 'RESTART')"
              v-if="scope.row.status == 'SUSPENSION'"
            >
              重启
            </el-button>
            <el-button
              type="text"
              @click="handlerState(scope.row, 'SUSPENSION')"
              v-if="scope.row.status == 'UNSENT'"
            >
              暂停
            </el-button>
            <el-button
              type="text"
              @click="handlerState(scope.row, 'ABORT')"
              v-if="
                scope.row.status == 'UNSENT' || scope.row.status == 'SENDING'
              "
            >
              终止
            </el-button>
            <el-button
              type="text"
              @click="handlerState(scope.row, 'RECALL')"
              v-if="isShowRevoke(scope.row.status)"
            >
              撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
    </div>
  </div>
</template>

<script>
import activitySearch from '@component/messageManagement/message/activitySearch'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  activityList,
  changeStatus,
  withdrawCompileOperation,
  activityTypes
} from '@/api/notice'

export default {
  components: { activitySearch },
  filters: {
    filterStatus(value, that) {
      for (let i = 0; i < that.avtivityTypeList.length; i++) {
        const item = that.avtivityTypeList[i]
        if (value === item.activityType) {
          return item.note
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      sendState: [],
      total: 0,
      that: this,
      avtivityTypeList: [],
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      }
    }
  },
  mounted() {
    this.searchList()
    this.getStatusList()
    //获取活动类型
    activityTypes({}, (res) => {
      this.avtivityTypeList = res
    })
  },
  methods: {
    //列表
    searchList() {
      this.loading = true
      activityList(this.searchParams, (res) => {
        this.total = res.total
        this.tableData = res.rows
        this.loading = false
      })
    },
    //获取字典  发送状态
    async getStatusList() {
      this.sendState = await sysNormalDisable('send_status', 'send_status')
    },
    //搜索
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    //详情、编辑
    toDetailOrEdit(row, val) {
      if (val === 'Detail') {
        this.$router.push({
          name: 'wh:activityMessageDetail',
          query: { id: row.id }
        })
      } else {
        this.$router.push({
          name: 'wh:activityMessage',
          query: { id: row.id }
        })
      }
    },
    //状态
    handlerState(row, val) {
      let id = row.id
      let obj = { statusOperate: val, isQueryString: true }
      switch (val) {
        case 'RESTART':
          changeStatus(id, obj, () => {
            this.$message.success('重启成功')
            this.searchList()
          })
          break
        case 'SUSPENSION':
          changeStatus(id, obj, () => {
            this.$message.success('暂停成功')
            this.searchList()
          })
          break
        case 'ABORT':
          changeStatus(id, obj, () => {
            this.$message.success('终止成功')
            this.searchList()
          })
          break
        case 'RECALL':
          withdrawCompileOperation(id, { status: val }, () => {
            this.$message.success('撤回成功')
            this.searchList()
          })
          break
      }
    }
  },
  computed: {
    isShowEdit() {
      return function(val) {
        return val === 'UNSENT' || val === 'SUSPENSION' || val === 'WITHDRAWN'
      }
    },
    isShowRevoke() {
      return function(val) {
        return val === 'SENT' || val === 'SENDING'
      }
    }
  }
}
</script>
